<template>
    <div>
        <el-form :model="organClick" ref="formRef" :rules="rules" label-width="80px" :inline="false" size="default"
            status-icon :validate-on-rule-change="false" style="margin: 0 auto; width: 480px;">
            <el-form-item label="名称:" prop="orgAbr" required>
                <el-input v-model="organClick.orgAbr" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="编号:" prop="orgNo" required>
                <el-input v-model="organClick.orgNo" placeholder="请输入编号" />
            </el-form-item>
            <el-form-item label="上级机构:" prop="parentId">
                <el-tree-select v-model="organClick.parentId" :data="organTreeData" check-strictly
                    :props="{ children: 'children', label: 'orgAbr', value: 'id' }" :default-expand-all="true"
                    :render-after-expand="false" placeholder="请选择上级机构" clearable>
                </el-tree-select>
            </el-form-item>
            <el-form-item label="排序:" prop="sort">
                <el-input v-model="organClick.sort" />
            </el-form-item>
            <el-form-item label="备注:" prop="remark">
                <el-mention type="textarea" v-model="organClick.remark" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <div class="button-container">
            <el-button @click="close">
                <span>关闭</span>
            </el-button>
            <el-button type="primary" @Click="onsubmit(formRef)">
                <span>确定</span>
            </el-button>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { ref, reactive, defineEmits } from 'vue'
import useSys from '@/store/useSys';
import request from '@/api/request';
import { ElMessage } from 'element-plus';
let sys = useSys();
let organTreeData = ref([]) // 树展示数据
let formRef = ref(null) // 树引用对象
const emits = defineEmits(['close'])

// 树点击对象/表单对象
let organClick = ref({
    orgNo: null,
    orgAbr: null,
    parentId: null,
    sort: '',
    remark: null
})

const findOrgan = () => {
    request.get('organ/findOrganTree').then(resp => {
        if (resp.code == 200) {
            organTreeData.value = resp.data
        }
    })
}
findOrgan();



const onsubmit = (formEl) => {
    formEl.validate((v) => {
        if (v) {
            console.log(organClick.value);
            request.post('organ/organInsert', { ...organClick.value }).then(resp => {
                if (resp.code == 200) {
                    ElMessage({
                        message: '成功',
                        type: 'success'
                    })
                    emits('close')
                }
            })
        }
    })
}

const rules = reactive({
    orgAbr: [
        { required: true, message: '请输入名称！', trigger: 'blur' }
    ],
    orgNo: [
        { required: true, message: '请输入编号！', trigger: 'blur' }
    ]
})

const close = () => {
    emits('close')
}
</script>

<style scoped></style>
